<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pm="http://primefaces.org/mobile">

    <f:view renderKitId="PRIMEFACES_MOBILE" />

    <h:head></h:head>

    <h:body>

        <pm:page id="firstScreen">
            <!-- p:dialog header="About CT" widgetVar="dialogInfo" showEffect="pop">
                <h:outputText value="Cargo Tracker is ... and this is some information that still need to be filled.&lt;br/&gt;For more, please visit..." escape = "false"/>
            </p:dialog -->

            <pm:header title="Event Logger" id="header" fixed="true" swatch="b">
                <f:facet name="left">
                    <p:button value="Quit" onclick="window.close()"/>
                </f:facet>
                <f:facet name="right" id="rightFacet">
                    <p:button value="Next" id="nextBtn" outcome="pm:secondScreen?transition=flip" disabled="#{!eventBackingBean.inputsOk}"/>
                </f:facet>
            </pm:header>

            <!--p:commandButton  value="About" onclick="PF('dialogInfo').show();" /-->

            <pm:content>

                <h:form id="firstForm">
                    <p:growl id="growl1" showDetail="false" />
                        
                        <p:selectOneMenu id="trackingId" value="#{eventBackingBean.trackId}"
                                         required="true" requiredMessage="Tracking missing">
                            <!--p:ajax listener="#  {eventBackingBean.updateVoyage}" update="panelVoyage"/-->
                            <p:ajax listener="#{eventBackingBean.updateVoyage}" update="firstForm,:firstScreen:nextBtn"/>
                            <!-- p:ajax listener="#  {eventBackingBean.updateVoyage}" update="panelVoyage,:firstScreen:nextBtn"/ -->
                            <!--f:selectItem itemLabel="Tracking" itemValue="# {eventBackingBean.trackId}" /-->
                            <f:selectItem itemLabel="Tracking" itemValue=""  noSelectionOption="true" />
                            <f:selectItems value="#{eventBackingBean.trackIds}" />
                        </p:selectOneMenu>
                    
                        <p:selectOneMenu id="portCode" value="#{eventBackingBean.location}"
                                         requiredMessage="Location missing" required="true">
                            <p:ajax listener="#{eventBackingBean.updateListener}" update=":firstScreen:nextBtn"/>
                            <!--f:selectItem itemLabel="Port" itemValue="# {eventBackingBean.location}" / -->
                            <f:selectItem itemLabel="Port" itemValue="" noSelectionOption="true" />
                            <f:selectItems value="#{eventBackingBean.locations}" />
                        </p:selectOneMenu>

                        <p:selectOneMenu id="eventType" value="#{eventBackingBean.eventType}" 
                                         requiredMessage="Event missing" required="true">
                            <f:selectItem itemLabel="Event" itemValue="" noSelectionOption="true" />
                            <f:selectItem itemLabel="RECEIVE" itemValue="RECEIVE" />
                            <f:selectItem itemLabel="LOAD" itemValue="LOAD" />
                            <f:selectItem itemLabel="UNLOAD" itemValue="UNLOAD" />
                            <f:selectItem itemLabel="CUSTOMS" itemValue="CUSTOMS" />
                            <f:selectItem itemLabel="CLAIM" itemValue="CLAIM" />
                            <p:ajax listener="#{eventBackingBean.updateListenerEvent}" update="panelVoyage,:firstScreen:nextBtn"/>
                        </p:selectOneMenu>
                        
                    <p:outputPanel id="panelVoyage">
                        <p:selectOneMenu id="voyage" value="#{eventBackingBean.voyageNumber}"
                                         disabled="#{not eventBackingBean.voyageSelectable}" 
                                         required="false" requiredMessage="Voyage missing">
                            <p:ajax listener="#{eventBackingBean.updateListenerEvent}" update=":firstScreen:nextBtn"/>
                            <f:selectItem itemLabel="Voyage" itemValue="#{eventBackingBean.voyageNumber}" />
                            <f:selectItems value="#{eventBackingBean.voyages}" />
                        </p:selectOneMenu>
                    </p:outputPanel>
                </h:form>

                <p:separator style="margin-top:18px;border-color: white;"/>

                <center><h:graphicImage value="/images/CTlogobadge128.png" height="48"/></center>
            </pm:content>
        </pm:page>


        <pm:page id="secondScreen">

            <pm:header id="header" title="Event Logger" fixed="true" swatch="b">
                <f:facet name="left">
                    <p:button value="Back" outcome="pm:firstScreen?transition=flip" />
                </f:facet>
                <f:facet id="right" name="right">
                    <h:form>
                        <p:commandButton  id="subBtn" value="Submit" actionListener="#{eventBackingBean.handleEventSubmission}" 
                                          ajax="false" disabled="#{!eventBackingBean.eventSubmitable}"/>
                    </h:form>
                </f:facet>
            </pm:header>

            <!--p:commandButton value="Submit" actionListener="#  {eventBackingBean.handleEventSubmission}" ajax="false" disabled="#  {!eventBackingBean.eventSubmitable}"/-->
            <!-- p:commandButton value="Restart" actionListener="#  {eventBackingBean.restart}" action="pm:firstScreen?transition=flip" ajax="false"/-->        
            <pm:content>
                <h:form>
                    <p:growl id="growl2" showDetail="false" />

                    <h:panelGrid columns="2" style="width: 100%" columnClasses="forty-percent, sixty-percent">
                        <p:outputLabel value="Date" for="completionDate"/>
                        <p:calendar id="completionDate" value="#{eventBackingBean.completionDate}" 
                                    requiredMessage="A date is needed" required="false"
                                    pattern="MM-dd-yyyy" >
                            <p:ajax event="dateSelect" listener="#{eventBackingBean.timeSet()}" update=":#{p:component('subBtn')}"/>
                        </p:calendar>
                    </h:panelGrid>

                </h:form>
                <p:separator />
                <center><h:graphicImage value="/images/CTlogobadge128.png" height="48"/></center>
            </pm:content>
        </pm:page>

    </h:body>
</html>